<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>新的模板</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">


    <!-- 遍历数组 -->
    <h2>人员列表</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(person, index) in persons" :key="index">
            {{person.name}}-{{person.name}}-{{index}}
            <input type="text"/>
        </li>
    </ul>


</div>

<script type="text/javascript">
    Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

    <!--
        面试题： react、vue中的 key有什么作用？ （key的内部原理）

            1.虚拟DOM中key的作用：
                    key是虚拟DOM对象的标识：当数据发生变化时， vue会根据【新数据】生成【新的虚拟DOM】
                    随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异化比较，比较规则如下：

            2.对比规则：
                    1）.旧虚拟DOM中找到与新虚拟DOM相同的key：
                            1）.若虚拟DOM中内容没变, 直接使用之前真实DOM!
                            2）.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

                     2）.旧虚拟DOM中未找到与新虚拟DOM相同的key
                            创建新的真实DOM，随后渲染到页面

             3.用index作为key可能会引发问题：
                      1）.若对数据进行：逆向添加、逆序删除等破坏顺修操作：
                             会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低

                      2）.如果结构中包含输入类DOM：
                             会产生错误DOM更新 ==> 界面又问题

             4.开发中如何选择key：
                      1）.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
                      2）.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                            使用index作为key是没有问题的

     -->

    new Vue({
        el: '#root'
        , data: {
            persons: [
                {id: '001', name: '张三', age: 18}
                , {id: '002', name: '张四', age: 19}
                , {id: '003', name: '张五', age: 20}
                , {id: '004', name: '张六', age: 21}
            ]
        }
        , methods: {
            add() {
                const p = {id: '005', name: '老刘', age: 40}
                this.persons.unshift(p)
            }
        }
    })

</script>
</body>
</html>
